<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网易云</title>
</head>

<body>
    <div class="outer">
        <input type="text" id="keywords" placeholder="搜索歌曲" value="">

        <button id="send">搜索</button>

        <div style="margin: 10px 0;">
            <button class="btn btn-info content disable" id="prev">上一页</button>
            <button class="btn btn-info content disable" id="next">下一页</button>
        </div>

        <div>
            <audio id="player" src="" controls></audio>
        </div>

        <table class="table table-bordered">
            <thead>
                <td>音乐标题</td>
                <td>歌手</td>
                <td>专辑</td>
                <td>时长</td>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script>
            function _ajaxTool(method, url, data, cb) {
                let xhr = new XMLHttpRequest();
                if (method == 'GET') { // 处理 GET
                    let nullUrl = '';
                    for (let key in data) {
                        nullUrl += `${key}=${data[key]}&`;
                    };
                    let newUrl = `${url}?${nullUrl.slice(0,-1)}`; // 拼接 删除最后一个&
                    console.log(newUrl);
                    xhr.open(method, newUrl);
                    xhr.send();
                } else { // 处理 POST
                    let postData = '';
                    xhr.open(method, url);
                    // 设置请求体格式
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
                    for (let key in data) {
                        postData += `${key}=${data[key]}&`;
                    };
                    postData = postData.slice(0, -1); // 拼接 删除最后一个&
                    xhr.send(postData);
                };
                xhr.addEventListener('readystatechange', function() {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            cb(JSON.parse(xhr.responseText));
                        }
                    }
                })

            };

            // 请求地址
            let url = `http://netease.0melon0.cn/search`;
            // 请求数据
            let data = {
                    keywords: '',
                    limit: 10,
                    offset: 0,
                }
                // _ajaxTool('GET', url, data, render);

            let tbody = document.querySelector('tbody');

            // 渲染
            function render(data) {
                console.log(data.result.songs);
                tbody.innerHTML = ''; // 清空数据
                data.result.songs.forEach(function(ele) {
                    tbody.innerHTML += `
                                         <tr data-id = '${ele.id}'>
                                         <td>${ele.name}</td>
                                         <td>${ele.artists[0].name}</td>
                                         <td>${ele.album.name}</td>
                                         <td>${fz(ele.duration)}</td>
                                         </tr>
                                       `;
                })
            };
            let prev = document.querySelector('#prev');
            // 上一页
            prev.addEventListener('click', function() {
                data.offset -= data.limit;
                if (data.offset < 0) {
                    data.offset = 0;
                }
                _ajaxTool("GET", url, data, render)
            })

            // 下一页
            let next = document.querySelector('#next');
            next.addEventListener('click', function() {
                data.offset += data.limit;
                _ajaxTool("GET", url, data, render)
            })

            // 毫秒改为分钟
            function fz(duration) {
                let f = parseInt((duration / 1000 / 60) % 60); // 分钟
                let s = parseInt((duration / 1000) % 60); // 秒
                s = s < 10 ? '0' + s : s; // 补零
                return `${f}:${s}`
            }

            // 搜索
            let ipt = document.querySelector('#keywords');
            let btn = document.querySelector('#send');
            // console.log(ipt, btn);

            // btn.addEventListener('click', function() {
            //     if (ipt.value != '') {
            //         data.keywords = ipt.value;
            //     };
            //     _ajaxTool('GET', url, data, render);
            // });

            btn.addEventListener('click', function() {
                data.keywords = ipt.value;
                _ajaxTool('GET', url, data, render)
            })

            // 播放
            let player = document.querySelector('#player');
            tbody.addEventListener('click', function(e) {
                let songId = e.target.parentNode.getAttribute('data-id')
                player.src = `https://music.163.com/song/media/outer/url?id=${songId}.mp3 `;
                player.play();
            })
        </script>
</body>